<template>
  <ul>
    <!--
        目前这个组件是放在home组件上展示
        当页签切换的时候，这个组件其实是被销毁了
        所以这里的input写的内容也就不存在了。

    -->
                  <li>news001<input type="text"></li>
                  <li>news002<input type="text"></li>
                  <li>news003<input type="text"></li>
                </ul>
</template>

<script>
export default {
    name:'NewsCompoent',
    // 两个全新的生命周期钩子
    /**
     * 如果你的某个组件被 keepalive缓存了起来
     * 然后你在这个组件定义了一些需要被持续执行的动画效果
     * 
     * 由于你的这个组件路由展示的时候，效果被触发展现
     * 但是当你路由走的时候，你之前配置过缓存的效果
     * 所以效果虽然看不见了，但是依旧在执行，所以我们
     * 需要一些特殊的方法来完成这一操作
     * 
     * 这是路由独有的两个声明钩子
     */
    activated() {
      // 被激活时
      console.log("一段非常耗时的效果代码");
    },
    deactivated() {
      // 取消激活时
      console.log("取消一段非常耗时的效果代码");
    },
}
</script>